<script setup>
import rulerSketch from '@/views/graph-editor/components/graph-center-panel/components/ruler-sketch/ruler-sketch.vue'
import { toRefs, computed } from 'vue'
const props = defineProps({
  width: {
    type: Number,
    default: 800
  },
  height: {
    type: Number,
    default: 400
  },
  scale: {
    type: Number,
    default: 1
  }
})
const { width, height, scale } = toRefs(props)
const styles = computed(() => {
  return {
    transform: `scale(${scale.value})`,
    width: `${width.value}px`,
    height: `${height.value}px`
  }
})
</script>

<template>
  <div class="ruler-sketch-warpper" :style="styles">
    <rulerSketch
      class="absolute top-[-36px]"
      :ticks="width"
      :tickSpacing="5"
      direction="horizontal"
    ></rulerSketch>
    <rulerSketch
      class="absolute left-[-36px]"
      :ticks="height"
      :tickSpacing="5"
      direction="vertical"
    ></rulerSketch>
    <slot></slot>
  </div>
</template>
